<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {lightingTrendList} from '../data/data.js'
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)


onMounted(() => {
  const colors = ['#649dff', '#788ab0', '#ff947d', '#6dc8ec', '#9270ca', '#fa8c16', '#b37feb', '#ff0000']
  const colors2 = ['#b0caf3', '#c0d3f6', '#f6d2c8', '#a9d1ed', '#c1b3d8', '#f1d6bd', '#ddcaf3', '#f3cece']

  const data = [
    'actualOutputCount',
    'actualProfitCount',
    'actualTaxCount',
    'electricityConsumptionCount',
    'employeeCount',
    'orderChangeCount',
    'saleAmountCount',
    'total'
  ].map(key => lightingTrendList.lightOverviewList.map((item, index) => item[key]));

  const sumData = data.reduce((acc, curr) => {
    curr.forEach((value, index) => {
      acc[index] = (acc[index] || 0) + value;
    });
    return acc;
  }, []);


  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '10%',
        top: '16%',
        containLabel: true
      },
      legend: {
        data: ['产值异常', '企业应缴税金异常', '利润额异常', '销售额异常', '用电量异常', '期末员工数异常', '订单变化异常', '总异常数'],
        left: '7%',
        top: '5%',
        textStyle: {
          color: "#666666"
        },
        itemWidth: 15,
        itemHeight: 10,
        itemGap: 25
      },
      xAxis: {
        type: 'category',
        data: lightingTrendList.mothList,
        axisLine: {
          lineStyle: {
            color: '#cdd5e2'

          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#666666"
          }
        },
      },
      yAxis: [{
        type: 'log',
        min: 1,
        logBase: 3,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#cdd5e2'
          }
        },
        splitLine: {
          show: true,
        },
        axisLabel: {
          textStyle: {
            color: "#666666"
          }
        },
      },
        {
          type: "value",
          name: "单位(家)",
          nameTextStyle: {
            color: "#666666"
          },
          position: "right",
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#666666"
            }
          }
        }
      ],
      series: data.map((item, index) => {
        return {
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colors[index]
              }, {
                offset: 1,
                color: colors2[index]
              }]),
            },
          },
          data: item
        }
      }).concat({
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: false, //平滑曲线显示
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          normal: {
            color: '#ffa43a',
            borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
            borderWidth: 5
          },
        },
        lineStyle: {
          color: "#ffa43a"
        },
        data: sumData
      })
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
